<template>
    <!-- 图上标会 -->
    <div class="modelBase">
        <ul class="modelBaseUl" v-if="pageData && pageData.data.length" @click="toggleSelectInputNotShow">
            <li class="modelBaseLi" v-for="(item, index) in pageData.data" :key="index" :title="item.name" :class="selectName == item.name ? 'selectModelBase' : ''" @click="drawingCoverage(item)">
                <img :src="item.img" class="modelBaseImages" alt="" />
            </li>
        </ul>
    </div>
</template>
<script>
import { modelBase } from '../../utils/modelBase'
import drawing from '../utils/drawing'
export default {
    name: 'modelBaseElement',
    props: ['type'],
    data() {
        return {
            pageData: '',
            selectName: ''
        }
    },
    watch: {
        type(newData) {
            this.getPageData()
        }
    },
    mounted() {
        setTimeout(() => {
            this.getPageData()
            drawing.init()
        }, 5000)
    },
    methods: {
        getPageData() {
            modelBase(this).then(res => {
                res.forEach(item => {
                    if (item.type == this.type) {
                        this.pageData = item
                        // console.log(item, 'pageData')
                    }
                })
            })
        },
        toggleSelectInputNotShow() {
            this.$emit('toggleSelectInputNotShow')
        },
        drawingCoverage(item) {
            this.selectName = item.name

            if (item.drawingType == 'marker') {
                // 标记
                drawing.drawingMarker(item)
            } else if (item.drawingType == 'plane') {
                // 二维平面
                drawing.drawingPlane(item)
            } else if (item.drawingType == 'stereoscopic') {
                // 三维立体
                drawing.drawingStereoscopic(item)
            }
            if (this.$store.state.singleProperty) {
                // 关闭属性对话框
                this.$store.commit('setSingleProperty')
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.modelBase {
    width: 100%;
    .modelBaseUl {
        padding-left: 0;
        margin: 0;
        min-height: 600px;
        .modelBaseLi {
            display: inline-block;
            width: 53px;
            height: 53px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            margin-bottom: 10px;
            margin-left: 24px;
            &:hover {
                border-color: rgba(32, 160, 255, 0.3);
            }
            .modelBaseImages {
                width: 100%;
                height: 100%;
                // object-fit: none;
            }
        }
        .selectModelBase {
            border-color: rgba(32, 160, 255, 0.3);
        }
    }
}
</style>
